<template>
  <section class="custom-filter">
    <a-row :gutter="[12, 6]" type="flex" key="row1">
      <a-col :flex="$store.getters.isMobile ? '100%' : '360px'">
        <a-input-search
          v-model:value="keywords"
          style="width: 100%"
          placeholder="请输入租客、房号、合同编号"
          @search="onSearch"
          allowClear
        />
      </a-col>
      <a-col flex="auto">
        <template v-for="(item, index) of fastSortList" :key="item.id">
          <a-checkable-tag
            :checked="item.id == checkedFastSordId"
            @change="handleFastSortChange(index)"
          >
            {{ item.name }}
          </a-checkable-tag>
        </template>
      </a-col>
      <a-col
        :flex="$store.getters.isMobile ? '100%' : '100px'"
        :class="$store.getters.isMobile ? 'text-left' : 'text-right'"
        v-if="showHeaderAction"
      >
        <a-space>
          <a-button
            v-if="electronContract"
            v-permission="['electronContractList', 'auth', 'eSignConfigList']"
            type="primary"
            ghost
            @click="elContractSetting"
          >
            电子合同配置
          </a-button>
          <template v-else>
            <a-button
              v-if="authContract.includes(from) ? canAddContract : true"
              type="primary"
              @click="addNewContract"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              合同
            </a-button>
            <a-dropdown
              v-if="
                authContract.includes(from)
                  ? canAddContract && showMoreMenu
                  : showMoreMenu
              "
            >
              <template #overlay>
                <a-menu @click="handleMenuMoreClick">
                  <a-menu-item v-if="haveImport" key="contracts_import"
                    >批量导入</a-menu-item
                  >
                  <a-menu-item key="new_contracts">批量生成合同</a-menu-item>
                  <a-menu-item v-if="from == 'contractList'" key="disposition">合同配置</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                更多
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </template>
        </a-space>
      </a-col>
    </a-row>

    <template v-if="type != 3">
      <a-row class="search-show margin-top16" align="middle" key="row2">
        <a-col :sm="12" :xl="14">
          <template v-if="Object.keys(filterTags).length">
            <a-tag
              closable
              v-for="(tag, tagKey) in filterTags"
              :key="tagKey"
              color="blue"
              @close="closeFilterTag(tagKey)"
              class="mt-10"
            >
              {{ tag }}
            </a-tag>
          </template>
          <span v-else>未选择筛选字段</span>
        </a-col>
        <a-col :sm="12" :xl="10" class="text-right">
          <a-button
            type="text"
            :disabled="clearDisabled"
            danger
            @click="resetFilter"
          >
            清除选项
          </a-button>
          <a-divider type="vertical" />
          <a-button type="text" @click="sortManageVisible = true"
            >快捷筛选管理</a-button
          >
          <a-divider type="vertical" />
          <a-button type="text" @click="searchBoxShow = !searchBoxShow">
            {{ searchBoxShow ? "收起" : "展开" }}
            <template #icon>
              <DownOutlined :rotate="searchBoxShow ? 180 : 0" />
            </template>
          </a-button>
        </a-col>
      </a-row>
      <transition name="slide-fade">
        <section class="search-box" v-show="searchBoxShow">
          <a-form layout="vertical">
            <a-row :wrap="true" key="row3" :gutter="24">
              <template
                v-for="(formItem, formKey) in formItemList"
                :key="formKey"
              >
                <a-col
                  :xs="16"
                  :sm="12"
                  :md="8"
                  :lg="6"
                  v-if="formItem.show"
                  :order="formItem.order"
                >
                  <a-form-item :label="formItem.title">
                    <!-- 日期选择 -->
                    <a-range-picker
                      v-if="formItem?.type == 'rangePicker'"
                      v-model:value="formState[formKey]"
                      @change="
                        (date, dateString) =>
                          handleDatePickerChange({ date, dateString }, formKey)
                      "
                    />
                    <!-- 单选 -->
                    <a-select
                      v-if="'singleSelect' == formItem.type"
                      v-model:value="formState[formKey]"
                      :options="formItem.options"
                      placeholder="请选择"
                      :allowClear="true"
                      @change="
                        (value, option) =>
                          handleSelectChange(
                            { value, option },
                            formKey,
                            'single'
                          )
                      "
                    >
                    </a-select>
                    <!-- 多选 -->
                    <template v-if="'multiSelect' == formItem.type">
                      <a-select
                        v-model:value="formState[formKey]"
                        :options="villageList"
                        placeholder="请选择"
                        :allowClear="true"
                        mode="multiple"
                        optionFilterProp="label"
                        @change="
                          (value, option) =>
                            onVillageChange({ value, option }, formKey)
                        "
                        v-if="formKey == 'village_ids'"
                      >
                      </a-select>
                      <a-select
                        v-model:value="formState[formKey]"
                        :options="buildList"
                        placeholder="请选择"
                        optionFilterProp="label"
                        :allowClear="true"
                        @change="
                          (value, option) =>
                            onBuildChange({ value, option }, formKey)
                        "
                        mode="multiple"
                        v-else-if="formKey == 'build_ids'"
                      >
                      </a-select>
                      <a-select
                        v-model:value="formState[formKey]"
                        :options="formItem.options"
                        placeholder="请选择"
                        :allowClear="true"
                        optionFilterProp="label"
                        mode="multiple"
                        @change="
                          (value, option) =>
                            handleSelectChange(
                              { value, option },
                              formKey,
                              'multiple'
                            )
                        "
                        v-else
                      >
                      </a-select>
                    </template>
                  </a-form-item>
                </a-col>
              </template>
            </a-row>
            <a-row type="flex" justify="space-between">
              <a-col :span="8">
                <a-space>
                  <a-button type="primary" ghost @click="handleSearchSetting">
                    设置
                  </a-button>
                  <a-popconfirm
                    :visible="sortPopVisible"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="onFastSortSettingConfirm"
                    @cancel="sortPopVisible = false"
                  >
                    <template #icon><ToolOutlined /></template>
                    <template #title>
                      <div>
                        <span>筛选项名称：</span>
                        <a-input
                          placeholder="请输入"
                          v-model:value="fastSortName"
                          class="ml-5"
                        />
                      </div>
                      <div class="mt-10">
                        <a-checkbox v-model:checked="fastSortIsDefault" />
                        <span class="ml-5">设置为默认筛选</span>
                      </div>
                    </template>
                    <a-button @click="sortPopVisible = true"
                      >设为快捷筛选</a-button
                    >
                  </a-popconfirm>
                </a-space>
              </a-col>
              <a-col :span="8" class="text-right">
                <a-space>
                  <a-button type="primary" @click="onSearch">
                    <template #icon>
                      <SearchOutlined />
                    </template>
                    搜索
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </section>
      </transition>
      <search-setting
        :visible="searchSettingVisible"
        @cancel="searchSettingVisible = false"
        @success="handleSearchSuccess"
      />
      <sort-manage
        :visible="sortManageVisible"
        @cancel="sortManageVisible = false"
        @success="handleSortManageSuccess"
      />
      <ElContractSetting
        :visible="elContractVisible"
        @handleCancel="elContractVisible = false"
      />
      <Import
        :visible="visibleImport"
        title="导入合同"
        from="contract"
        :importUrl="importUrl"
        :downloadTemUrl="downloadTemUrl"
        :showError="true"
        @cancelBtn="visibleImport = false"
        @refresh="importSuccess"
      />

      <!--  合同配置   -->
      <ContractDisposition
        :visible="dispositionVisible"
        @closeModal="dispositionVisible = false"
      />
    </template>
  </section>
</template>

<script>
import {
  computed,
  defineComponent,
  nextTick,
  reactive,
  ref,
  createVNode,
  onActivated,
} from "vue";
import {
  PlusOutlined,
  DownOutlined,
  SearchOutlined,
  ToolOutlined,
  ExclamationCircleOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue";
import SearchSetting from "./modules/SearchSetting.vue";
import SortManage from "./modules/SortManage.vue";
import store from "../../../store";
import { message, Modal } from "ant-design-vue";
import request from "../../../common/utils/request";
import moment from "moment";
import { useRoute, useRouter } from "vue-router";
import ElContractSetting from "@/components/contract/CustomFilter/modules/ElContractSetting.vue";
import Import from "@/views/setting/DepartmentUser/modules/Import.vue";
import BLCOMMON from "bl-common-vue3";
import ContractDisposition from "@/components/contract/CustomFilter/modules/ContractDisposition.vue";
import utils from "@/common/utils/utils";
export default defineComponent({
  props: {
    // 操作类型;1=在签合同;2=归档合同(已过期/已废弃)3=草稿合同;
    type: {
      type: Number,
      default: 1,
    },
    electronContract: {
      type: Boolean,
      default: false,
    },
    // 合同类型：成本合同；意向合同
    contractType: {
      type: String,
      default: "",
    },
    // 是否显示更多下拉菜单
    showMoreMenu: {
      type: Boolean,
      default: true,
    },
    // 批量导入 目前只实现按钮（定制需求）
    haveImport: {
      type: Boolean,
      default: false,
    },
    from: {
      type: String,
      default: "",
    },
    showHeaderAction: {
      type: Boolean,
      default: true,
    },
    // 初始化时没有选择参数是否请求列表
    initSearch: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    UploadOutlined,
    PlusOutlined,
    DownOutlined,
    SearchOutlined,
    ToolOutlined,
    SearchSetting,
    SortManage,
    ElContractSetting,
    Import,
    ContractDisposition,
  },
  setup(props, context) {
    const $route = useRoute();
    let routeQuery = {};
    const canAddContract = computed(() => {
      return BLCOMMON.utils.getBtnPermission([props.from, "curd", "add"]);
    });
    const authContract = ref([
      "contractList",
      "purposeContractList",
      "contractFile",
      "contractDraft",
    ]);

    // 关键词搜索
    const keywords = ref("");

    // 导入显隐（定制）
    const visibleImport = ref(false);
    const importUrl = ref({
      server: "/org",
      url: "/contract/import/v2",
    });
    const downloadTemUrl = ref({
      server: "/org",
      url: "/contract/import/demoFile",
    });

    // 是否展示搜索框
    const searchBoxShow = ref(false);

    // 搜索表单
    const formItemList = reactive({ ...formMap });
    console.log("formItemList------------------", formItemList);
    const formState = reactive({ ...defaultFormState });

    // 清除按钮是否可点击
    const clearDisabled = computed(() => {
      for (let key in formState) {
        if (!formItemEmpty(key)) {
          return false;
        }
      }
      return true;
    });

    let changedState = {}; // 日期字符串map
    const filterTags = ref({}); // 筛选内容
    // 监听日期选择
    const handleDatePickerChange = (e, key) => {
      const { date, dateString } = e;
      if (date.length) {
        // 选择了的日期
        changedState[key] = dateString;
        filterTags.value[
          key
        ] = `${formMap[key].title}：${dateString[0]}~${dateString[1]}`;
      } else {
        // 去掉了日期选择
        delete filterTags.value[key];
        delete changedState[key];
      }
    };
    // 监听下拉选择
    const handleSelectChange = (e, key, type) => {
      const { value, option } = e;

      if (formItemEmpty(key)) {
        delete filterTags.value[key];
        delete changedState[key];
      } else {
        if (type == "single") {
          // 单选
          changedState[key] = value;
          filterTags.value[key] = `${formMap[key].title}：${option.label}`;
        } else {
          // 多选
          changedState[key] = value.join(",");
          let showTitle = option.map((item) => item.label);
          showTitle = showTitle.join("、");
          filterTags.value[key] = `${formMap[key].title}：${showTitle}`;
        }
      }
    };

    const formItemEmpty = (key) => {
      return (
        formState[key] == undefined ||
        (Array.isArray(formState[key]) && formState[key].length == 0)
      );
    };

    // 关闭某项筛选
    const closeFilterTag = (key) => {
      formState[key] = defaultFormState[key];
      handleDatePickerChange({ date: [], dateString: [] }, key);
      delete changedState[key];
      nextTick(() => {
        onSearch();
      });
    };

    // 清除筛选
    const resetFilter = () => {
      initFormState();
      nextTick(() => {
        onSearch();
      });
    };

    const initFormState = () => {
      for (let key in filterTags.value) {
        formState[key] = defaultFormState[key];
        delete filterTags.value[key];
      }
      changedState = {};
      checkedFastSordId.value = 0;
    };

    // 设置搜索选择项-自定义筛选字段
    const searchSettingVisible = ref(false);
    const settingList = ref([]);
    const handleSearchSetting = () => {
      store
        .dispatch("SetSearchSettingList", {
          type: "map",
          data: formItemList,
        })
        .then(() => {
          searchSettingVisible.value = true;
        });
    };
    const handleSearchSuccess = () => {
      store
        .dispatch("GetSearchSettingState", { source: "contract" })
        .then((res) => {
          setFormItemList(res);
          searchSettingVisible.value = false;
        });
    };

    // 快捷筛选
    const sortManageVisible = ref(false);
    const handleSortManageSuccess = () => {
      sortManageVisible.value = false;
      getFastSortList();
    };
    const setFormItemList = (state) => {
      for (let key in state) {
        formItemList[key] = state[key];
      }
    };
    const fastSortName = ref("");
    const fastSortIsDefault = ref(false);
    const sortPopVisible = ref(false);
    const onFastSortSettingConfirm = () => {
      if (!fastSortName.value) {
        message.warning("请填写快捷筛选名称");
        return;
      }
      let params = {
        name: fastSortName.value,
        is_default: fastSortIsDefault.value ? 1 : 0,
        needMsg: true,
      };
      params.content = JSON.stringify(changedState);
      request.post("/org", "/contract/fastSearchSet", params).then((res) => {
        sortPopVisible.value = false;
        message.success(res.msg || "操作成功");
        getFastSortList();
      });
    };
    // 获取快捷筛选列表
    const fastSortList = ref([]);
    const checkedFastSordId = ref(0);
    const getFastSortList = (type) => {
      request
        .get("/org", "/contract/fastSearchList", { limit: 5 })
        .then((res) => {
          fastSortList.value = res.list || [];
          if (type == "init") {
            if (Object.keys(routeQuery).length) {
              handleRouteQuery();
            } else if (fastSortList.value.length) {
              // 初始选中默认快捷筛选
              handleFastSortChange(0);
            } else {
              if (props.initSearch) {
                onSearch();
              }
            }
          }
        });
    };
    const handleRouteQuery = () => {
      console.log("handleRouteQuery routeQuery", routeQuery);
      changedState = { ...routeQuery };
      for (let key in changedState) {
        if (formMap[key]) {
          if (formMap[key].type == "singleSelect") {
            changedState[key] = Number(changedState[key]);
          }
        } else {
          delete changedState[key];
        }
      }
      console.log("handleRouteQuery changedState", changedState);
      nextTick(() => {
        setDataToForm();
        onSearch();
      });
    };
    const handleFastSortChange = (index) => {
      const item = fastSortList.value[index];
      if (checkedFastSordId.value == item.id) {
        return;
      }
      initFormState();
      nextTick(() => {
        checkedFastSordId.value = item.id;
        changedState = item.content;
        // 如果有项目或者楼宇 改变---
        if (changedState?.village_ids?.length) {
          let _villages = [];
          villageAndBuildList.value.forEach((v) => {
            if (changedState.village_ids.includes(v.id)) {
              _villages.push(v.id);
            }
          });
          changedState.village_ids = _villages;
          if (!_villages.length) {
            delete changedState.village_ids;
          }
        }
        if (changedState?.village_ids?.length) {
          let vbList = villageAndBuildList.value.filter((village) =>
            changedState?.village_ids?.includes(village.id)
          );
          let bList = [];
          vbList.forEach((village) => {
            if (village.buildList && village.buildList.length > 0) {
              village.buildList.forEach((build) => {
                bList.push({
                  label: build.build_name,
                  value: build.id,
                });
              });
            }
          });
          buildList.value = bList;
        }
        if (changedState?.build_ids?.length) {
          let _builds = [];
          buildList.value.forEach((v) => {
            if (changedState.build_ids.includes(v.value)) {
              _builds.push(v.value);
            }
          });
          changedState.build_ids = _builds;
          if (!_builds.length) {
            delete changedState.build_ids;
          }
        }
        setDataToForm();
        onSearch();
      });
    };
    const setDataToForm = () => {
      filterTags.value = {};
      for (let key in changedState) {
        let content = "";
        if (!formMap[key]) {
          continue;
        }
        if (formMap[key]?.type == "rangePicker") {
          formState[key] = [
            moment(changedState[key][0]),
            moment(changedState[key][1]),
          ];
          content = `${changedState[key][0]}~${changedState[key][1]}`;
        } else if (formMap[key].type == "multiSelect") {
          const data = formMap[key].isSpecial
            ? changedState[key]
            : changedState[key].split(",");
          formState[key] = data.map((item) => {
            if (Number(item)) {
              return Number(item);
            } else {
              return item;
            }
          });
          let result = [];
          if (key === "village_ids") {
            villageList.value.forEach((item) => {
              if (formState[key].includes(item.value)) {
                result.push(item.label);
              }
            });
          } else if (key === "build_ids") {
            buildList.value.forEach((item) => {
              if (formState[key].includes(item.value)) {
                result.push(item.label);
              }
            });
          } else {
            formMap[key].options.forEach((item) => {
              if (formState[key].includes(item.value)) {
                result.push(item.label);
              }
            });
          }
          content = result.join("、");
        } else {
          formState[key] = changedState[key];
          const result = formMap[key].options.find(
            (item) => item.value == changedState[key]
          );
          content = result.label;
        }
        filterTags.value[key] = `${formMap[key].title}：${content}`;
      }
    };

    // 搜索
    const onSearch = () => {
      let params = { ...changedState };
      console.log("onSearch params", params);
      if (params.from && params.from == "mobile") {
        delete params.from;
      }
      for (let key in params) {
        if (formMap[key]?.type == "rangePicker") {
          const startKey = key + "_start";
          const endKey = key + "_end";
          params[startKey] = params[key][0];
          params[endKey] = params[key][1];
          delete params[key];
        }
      }
      if (keywords.value) {
        params.keywords = keywords.value;
      }
      console.log("onSearchonSearch", params);
      context.emit("search", params);
    };

    // 新建合同
    const $router = useRouter();
    const addNewContract = () => {
      // query: { type: props.type }
      // 验证是否有审批流程
      request.post("/org", "/contract/checkBuildProcess").then((res) => {
        if (res.hasProcess) {
          let microAppUrl = '';
          let microId = 'org_add_contract';
          if (props.contractType) {
            microAppUrl = `/contract/addContract?contractType=${props.contractType}`
            microId = microId + `_${props.contractType}`
          } else {
            microAppUrl = `/contract/addContract`
          }
          if (window.__MICRO_APP_ENVIRONMENT__) {
            window.microApp.forceDispatch({
              type: "SetMicroPages",
              microInfo: {
                microId: microId,
                app: 'org',
                name: `创建合同`,
                url: microAppUrl,
              }
            })
          }
        } else {
          Modal.confirm({
            title: () => "提示",
            content: () => "您需要先添加合同新建审批流程才能创建合同哦~",
            icon: () => createVNode(ExclamationCircleOutlined),
            centered: true,
            okText: () => "前往",
            onOk() {
              utils.goProcessContract({type: "add"});
            },
          });
        }
      });
    };

    const btnImport = () => {
      visibleImport.value = true;
    };

    // 更多操作
    const elContractVisible = ref(false);

    // 合同配置
    const dispositionVisible = ref(false);
    const handleMenuMoreClick = (e) => {
      const { key } = e;
      if (key == "el_contract") {
        elContractSetting();
        return;
      }
      if (key == "new_contracts") {
        $router.push({ name: "addContracts" });
        return;
      }
      if (key == "contracts_import") {
        btnImport();
        return;
      }
      if (key == 'disposition') {
        // 合同配置
        dispositionVisible.value = true;
      }
    };

    const importSuccess = () => {
      visibleImport.value = false;
      context.emit("importSuccess");
    };

    // 电子合同配置
    const elContractSetting = () => {
      elContractVisible.value = true;
    };

    const villageList = ref([]);
    const buildList = ref([]);
    const villageAndBuildList = ref([]);

    const getVillageList = () => {
      return new Promise((resolve) => {
        if (villageAndBuildList.value.length) {
          resolve();
        } else {
          request
            .get("/org", "/build/villageAndBuildList/v2", {
              checked: 1,
            })
            .then((res) => {
              villageAndBuildList.value = res.villageList;
              let vList = [];
              let bList = [];
              res.villageList.forEach((item) => {
                vList.push({
                  label: item.name,
                  value: item.id,
                });
                if (item.buildList && item.buildList.length > 0) {
                  item.buildList.forEach((build) => {
                    bList.push({
                      label: build.build_name,
                      value: build.id,
                    });
                  });
                }
              });
              villageList.value = vList;
              buildList.value = bList;
              resolve();
            });
        }
      });
    };

    // 切换项目时
    const onVillageChange = (e, key) => {
      let { value, option } = e;
      let vbList = JSON.parse(JSON.stringify(villageAndBuildList.value));
      let bList = [];
      if (value.length > 0) {
        vbList = villageAndBuildList.value.filter((village) =>
          value.includes(village.id)
        );
        changedState[key] = value;
        let labelArr = option.map((item) => item.label);
        filterTags.value[key] = `${formMap[key].title}：${labelArr.join('、')}`;

        // 筛选项目时清除楼宇选中项
        formState["build_ids"] = [];
        delete filterTags.value["build_ids"];
        delete changedState["build_ids"];
      } else {
        delete filterTags.value[key];
        delete changedState[key];
      }

      vbList.forEach((village) => {
        if (village.buildList && village.buildList.length > 0) {
          village.buildList.forEach((build) => {
            bList.push({
              label: build.build_name,
              value: build.id,
            });
          });
        }
      });
      buildList.value = bList;
    };

    const onBuildChange = (e, key) => {
      let { value, option } = e;
      if (value.length > 0) {
        changedState[key] = value;
        let labelArr = option.map((item) => item.label);
        filterTags.value[key] = `${formMap[key].title}：${labelArr.join('、')}`;
      } else {
        delete filterTags.value[key];
        delete changedState[key];
      }
    };

    const init = () => {
      routeQuery = $route.query;
      getVillageList().then(() => {
        if (props.type != 3) {
          // 获取筛选项
          store.dispatch("GetFilterOptions").then((res) => {
            if (res) {
              for (let key in res) {
                if (formItemList[key] && !formItemList[key].isSpecial) {
                  formItemList[key].options = res[key];
                }
              }
              getFastSortList("init");
            }
          });
        }
      });
    };

    onActivated(() => {
      init();
    });

    return {
      keywords,
      searchBoxShow,
      formState,
      formItemList,
      clearDisabled,
      filterTags,
      searchSettingVisible,
      settingList,
      sortManageVisible,
      fastSortName,
      fastSortIsDefault,
      sortPopVisible,
      fastSortList,
      checkedFastSordId,
      elContractVisible,
      visibleImport,
      importUrl,
      downloadTemUrl,
      canAddContract,
      authContract,
      dispositionVisible,
      handleDatePickerChange,
      handleSelectChange,
      closeFilterTag,
      resetFilter,
      handleSearchSetting,
      handleSearchSuccess,
      handleSortManageSuccess,
      onFastSortSettingConfirm,
      handleFastSortChange,
      onSearch,
      addNewContract,
      handleMenuMoreClick,
      elContractSetting,
      btnImport,
      importSuccess,

      villageList,
      buildList,
      onVillageChange,
      onBuildChange,
    };
  },
});
const defaultFormState = {
  sign_time: [],
  lease_starttime: [],
  lease_endtime: [],
  retreat_time: [],
  created_at: [],
  is_renewal: undefined,
  source: [],
  followup_uid: [],
  cuser_uid: [],
  status: [],
  contract_tag: [],
  type: undefined,
  clause_type: undefined,
  industry_id: [],
  village_ids: [],
  build_ids: [],
  org_branch_id: [],
};
const formMap = {
  sign_time: {
    title: "签订日期",
    order: 1,
    type: "rangePicker",
    show: true,
  },
  lease_starttime: {
    title: "租赁起始日期",
    order: 2,
    type: "rangePicker",
    show: true,
  },
  lease_endtime: {
    title: "租赁结束日期",
    order: 3,
    type: "rangePicker",
    show: true,
  },
  retreat_time: {
    title: "退租日期",
    order: 4,
    type: "rangePicker",
    show: true,
  },
  created_at: {
    title: "合同创建日期",
    order: 5,
    type: "rangePicker",
    show: true,
  },
  is_renewal: {
    title: "是否续租",
    order: 6,
    type: "singleSelect",
    options: [
      { value: 1, label: "是" },
      { value: 0, label: "否" },
    ],
    show: true,
  },
  source: {
    title: "合同来源",
    order: 7,
    type: "multiSelect",
    options: [],
    show: true,
  },
  followup_uid: {
    title: "经办人",
    order: 8,
    type: "multiSelect",
    options: [],
    show: true,
  },
  cuser_uid: {
    title: "创建人",
    order: 9,
    type: "multiSelect",
    options: [],
    show: true,
  },
  status: {
    title: "合同状态",
    order: 10,
    type: "multiSelect",
    options: [],
    show: true,
  },
  contract_tag: {
    title: "合同标签",
    order: 11,
    type: "multiSelect",
    options: [],
    show: true,
  },
  type: {
    title: "合同类型",
    order: 12,
    type: "singleSelect",
    options: [],
    show: true,
  },
  entry_status: {
    title: "分成租赁录入状态",
    order: 13,
    type: "singleSelect",
    options: [],
    show: true,
  },
  clause_type: {
    title: "条款类型",
    order: 14,
    type: "singleSelect",
    options: [],
    show: false,
  },
  industry_id: {
    title: "所属行业",
    order: 15,
    type: "multiSelect",
    options: [],
    show: false,
  },
  village_ids: {
    title: "选择项目",
    order: 16,
    type: "multiSelect",
    options: [],
    show: true,
    isSpecial: true,
  },
  build_ids: {
    title: "选择楼宇",
    order: 17,
    type: "multiSelect",
    options: [],
    show: true,
    isSpecial: true,
  },
  org_branch_id: {
    title: "所属公司",
    order: 18,
    type: "multiSelect",
    show: true,
  },
};
</script>

<style lang="less" scoped>
.card {
  border: 1px solid #f4f4f4;
  background: #fff;
  padding: 16px;
}
.custom-filter {
  .tip {
    font-size: 14px;
    color: #666;
  }
  .extra {
    margin-right: 10px;
  }
  .search-show {
    &:extend(.card);
    min-height: 54px;
  }
  .margin-top16 {
    margin-top: 16px;
  }
  .search-box {
    &:extend(.card);
  }
}
// 动画效果
.slide-fade-enter-from,
.slide-fade-leave-to {
  //进入前，离开后
  height: 0;
  opacity: 0;
}
.slide-fade-enter-to,
.slide-fade-leave {
  //进入后，离开前
  max-height: 1000px;
}
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.1s ease;
}
</style>
